padding
|
|
|
|
|
|
|||||||||
|
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
|
Частково |
Частково |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Коротка
інформація
|
CSS |
CSS1,
CSS2.1 |
|
Значення за умовчанням |
0 |
|
Наслідує |
Ні |
|
Застосовується |
До
усіх елементів |
|
Аналог HTML |
Ні |
|
Посилання на специфікацію |
http://www.w
3.org/TR/CSS21/box.html#propdef - padding |
Опис
Встановлює
значення полів навколо утримуваного елементу. Полем називається відстань від
внутрішнього краю рамки елементу до уявного прямокутника, що обмежує його вміст
(мал. 1).
Мал. 1. Поле зліва від тексту
Властивість
padding дозволяє задати величину поля відразу для усіх сторін елементу або
визначити її тільки для вказаних сторін.
Синтаксис
padding:
[значення | відсотки] {1, 4} | inherit
Значення
Дозволяється
використовувати одно, два, три або чотири значення, розділяючи їх між собою
пропуском. Ефект залежить від кількості значень і приведений в таблицю. 1.
|
Таблиця. 1.
Залежність від числа значень |
|
|
Число значень |
Результат |
|
1 |
Поля будуть встановлені одночасно від кожного краю
елементу. |
|
2 |
Перше значення встановлює поля від верхнього і нижнього
краю, друге - від лівого і правого. |
|
3 |
Перше значення задає поле від верхнього краю, друге, -
одночасно від лівого і правого краю, а третє - від нижнього краю. |
|
4 |
По черзі встановлюється поля від верхнього, правого,
нижнього і лівого краю. |
Величину
полів можна вказувати в пікселах (px), відсотках (%) або інших допустимих для
CSS одиницях. Значення inherit вказує, що воно наслідує у батька.
Приклад
HTML 4.0
CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251"> <title>padding</title> <style type="text/css"> . .layer { background: #fc3; /* Колір фону */ border: 2px solid black; /* Параметрів рамки */ padding: 20px; /* Полів навколо тексту */ } </style> </head> <body> <div class="layer">Луцький національний техніний університет є одним із найкращих професійних закладів освіти у місті Луцьку. Найкращою з підготовки спеціалістів є кафедра професійного навчання, що займається професійною підготовкою студентів. </div> </body></html>
Результат
цього прикладу показаний ні мал. 2.
Мал. 2. Застосування властивості border - right - color
Об'єктна модель
[window.]document.getElementById("elementID").style.padding
Браузери
Internet
Explorer до сьомої версії включно не підтримує значення inherit.
